<template>
	<view>
		<view class="confirm-popup">
			<view class="confirm-wrap">
				<view class="title-wrap">Order details</view>
				<view class="order-wrap">
					<image class="order-img" mode="widthFix" :src="interfaceurl + orderinfo.goods.original_img"></image>
					<view class="order-info">
						<view class="info-item">
							<view class="info-title">Order number:</view>
							<view class="info-content">{{orderinfo.order.order_sn}}</view>
						</view>
						<view class="info-item">
							<view class="info-title">Capture time:</view>
							<view class="info-content">{{orderinfo.order.add_time_text}}</view>
						</view>
						<view class="info-item">
							<view class="info-title">Total order amount:</view>
							<view class="info-content red">{{orderinfo.order.goods_price}}</view>
						</view>
						<view class="info-item">
							<view class="info-title">Expected return:</view>
							<view class="info-content red">{{orderinfo.order.total_amount}}</view>
						</view>
						<!--
						<view class="Commission">Commission:{{Commission}}% of the product price</view>
						-->
					</view>
				</view>
				<view class="btn-wrap">
					<view class="btn cancel" @click="$emit('cancel',$event)">Cancel order</view>
					<view class="btn confirm" @click="$emit('confirm',$event)">Submit</view>
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
import fetch from '@/common/fetch.js';
export default {
	props:{
		orderinfo:{
			type: Object,
			default(){
				return {
					goods:{					
						original_img: '',
					},
					order:{
						order_id: 0,
						order_sn: '',
						total_amount:0,
						goods_price:0,
						add_time_text:''
					}				
				}
			}
		}		
	},
	computed: {
		interfaceurl() {
			let url = fetch.interfaceUrl();
			return url;
		},
		Commission() {
			let val = ( parseFloat(this.orderinfo.order.total_amount) / parseFloat(this.orderinfo.order.goods_price) ).toFixed(2);
			return val;
		}
	},
	data() {
		return {
			user_money: 0
		};
	},
	onLoad: function(option) {	
	console.log(fetch)
	},
	methods: {
	
	}
};
</script>

<style lang="less" scoped>
  .confirm-popup{
		position: fixed;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.5);
		display: flex;
		align-items: center;	
		justify-content: center;
		.confirm-wrap{
			width: 560rpx;	
			border-radius: 32rpx;
			background: #fff;
		}
		.title-wrap{
			color:#fff;	
			width: 100%;		
			height: 120rpx;
			background: linear-gradient(180deg, #F53D49 0%, #FF7C4D 100%);
			border-radius: 32rpx 32rpx 0px 0px;
			font-size: 40rpx;
			text-align: center;
			line-height: 120rpx;
		}		
	}
	.order-wrap{
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			.order-img{
				width: 180rpx;
				height: 180rpx;
				margin-bottom:30rpx;
			}
			.order-info{
				width: 100%;
				.Commission{					
					font-size: 24rpx;
					font-weight: 400;
					color: #1E1E1F;
					line-height: 24rpx;
				}
				.info-item{
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					.info-title{
						font-size: 26rpx;
						font-weight: 600;
						color: #1E1E1F;
						flex:1;
					}
					.info-content{	
						flex:1;					
						font-size: 26rpx;
						font-weight: 400;
						color: #A4A4AD;
					}
					.red{
						color:#F53D46;
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}
		}
		.btn-wrap{
			display: flex;
			align-items: center;	
			justify-content: space-between;
			padding: 30rpx;
			box-sizing: border-box;
			.btn{
				width: 240rpx;			
				height: 70rpx;
				background: #FF9637;
				border-radius: 12rpx;
				text-align: center;
				line-height: 70rpx;
				font-size: 30rpx;
				color:#fff;
			}
			.confirm{
				background: #F53D46;				
				margin-left: 20rpx;	
			}
		}
</style>